<template>
  <div class="overview-container">
    <div class="overview-item">
      <p class="common-list-bread">人员</p>
      <div class="content">
        <!-- <div class="content-item"> -->
        <div class="content-item" v-for="(item, idx) in peopleList" :key="idx">
          <div class="item-desc">{{ item.name }}</div>
          <div class="item-progress">
            <!-- <div class="cur-progress blue"></div> -->
            <div class="cur-progress blue" :style="{ width: item.value }"></div>
            <span class="text white">{{ item.value }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="overview-item">
      <p class="common-list-bread">场地</p>
      <div class="content">
        <div class="content-item">
          <div class="item-desc">今早</div>
          <div class="item-progress">
            <div class="cur-progress orange"></div>
            <span class="text white">10%</span>
          </div>
        </div>
      </div>
    </div>
    <div class="overview-item">
      <p class="common-list-bread">试验装备</p>
      <div class="content">
        <div class="content-item">
          <div class="item-desc">今早</div>
          <div class="item-progress">
            <div class="cur-progress green"></div>
            <span class="text">10%</span>
          </div>
        </div>
      </div>
    </div>
    <div class="overview-item">
      <p class="common-list-bread">被测装备</p>
      <div class="content">
        <div class="content-item">
          <div class="item-desc">今早</div>
          <div class="item-progress">
            <div class="cur-progress blue2" :style="{ width: w }"></div>
            <span class="text">10%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
// import watchScroll from 'utils/watchScroll'

import { ref, reactive, onMounted,toRefs ,computed,watch,watchEffect} from "@vue/composition-api";
export default {
  setup() {
    let w = ref(0);
    let peopleList = ref([]);//人员
    let placeList = ref([]); //场地
    let testEquipmentList = ref([]);  //试验装备
    let equipmentUnderTest = ref([]);//被测装备
    let a = ref(0);
    let b = ref(0);
    let x = reactive({name:'',age:0});
    onMounted(() => {
        console.log(2);

      setTimeout(() => {
        console.log(1)
        w.value = "90%";
        peopleList.value = [
          {
            name: "周润发",
            value: "30%",
          },
          {
            name: "刘罗锅",
            value: "40%",
          },
          {
            name: "黄家驹",
            value: "80%",
          },
          {
            name: "枣园",
            value: "90%",
          },
        ];
      }, 500);
    });

    //只要改动监听的值就会触发
    /* watchEffect(()=>{
       console.log(`这是自动触发一次监听name===${x.name}`)
    }) */

    watchEffect(()=>{
      console.log(`这是自动触发一次监听name===${x.name}`)
    })
    watchEffect(()=>{
      console.log(`这是自动触发一次监听age===${x.age}`)
    })

    let c=computed(()=>{
      return a.value+''+b.value
    })

    let len = computed(()=>{
      return c.value.length
    })
    watch((x.name,(nv,ov)=>{
      console.log(nv,ov)
    }))

    
    return {
      //...toRefs(a)-->  针对let a=reactive({a:1}) 解析双向绑定
      //ref 不需要
      w,
      c,
      b,
      x,
      len,
      peopleList, a
    };

    
  },

  /* data() {
      return {


        userId: '',
        peopleList: [{
          name:'周润发',
          value:'0%'
        },
          {
          name:'刘罗锅',
          value:'0%'
        },
          {
          name:'黄家驹',
          value:'0%'
        },
          {
          name:'枣园',
          value:'0%'
        },],
       
        w: 0,

      }
    }, */
};
</script>
<style scoped>
.overview-container {
  display: flex;
}
.overview-item {
  flex: 1;
  margin-left: 5px;
}
.overview-item:first-child {
  margin-left: 0;
}
.content {
  background: #fff;
  min-height: 50px;
  padding: 20px 0;
  max-height: 72vh;
  overflow-y: auto;
}
.content-item {
  display: flex;
  margin: 0 20px 17px 0;
}
.content-item:first-child {
  padding-top: 0;
}
.content-item:nth-child(even) .item-progress {
  opacity: 0.7;
}

.content-item:last-child {
  margin-bottom: 0;
}
.item-desc {
  flex: 0 0 80px;
  text-align: right;
  padding-right: 10px;
}
.item-progress {
  flex: 1;
  height: 20px;
  position: relative;
  background-color: #f3f3f3;
}

.cur-progress.blue {
  background-color: #507ce7;
}
.cur-progress.blue2 {
  background-color: #3fbef5;
}
.cur-progress.orange {
  background-color: #f67e1f;
}
.cur-progress.green {
  background-color: #4fcb73;
}
.cur-progress {
  position: absolute;
  height: inherit;
  top: 0;
  left: 0;
  width: 60%;
  transition: width 1s linear 0.5s; /* 此处要动态给宽度 */
  transition-delay: 2s;
}
.text {
  position: absolute;
  top: 2px;
  left: 3px;
}
.text.white {
  color: #fff;
}
</style>
